<template>
  <div class="divBox pagediy-devise-container">
    <el-card class="box-card" shadow="never" :bordered="false">
      <div class="acea-row">
        <div class="tab_view">
          <div
            class="cell_item"
            :class="{ tab_active: listActive === index }"
            v-for="(item, index) in tabList"
            :key="index"
            @click="ProductNavTab(index)"
          >
            {{ item }}
          </div>
        </div>
        <div v-if="listActive === 0" class="rightModel acea-row">
          <!-- 方案1：使用Object标签替代iframe（推荐方案） -->
          <div class="leftModel">
            <div class="current_home">
              <div class="model_header">
                <!-- 原始iframe代码（已注释保留） -->
                <!-- <iframe id="iframe" class="iframe-box" :src="frontDomain" frameborder="0" ref="iframe"></iframe> -->

                <!-- Object标签方案 -->
                <object
                  v-if="!urlError"
                  :data="frontDomain"
                  type="text/html"
                  class="iframe-box object-preview"
                  ref="previewObject"
                  @load="onObjectLoad"
                  @error="onObjectError"
                  style="border: none"
                >
                  <!-- 备用内容：如果Object加载失败，显示提示 -->
                  <div class="preview-fallback">
                    <div class="fallback-content">
                      <i class="el-icon-picture-outline"></i>
                      <p>页面预览加载中...</p>
                      <el-button size="mini" @click="refreshPreview">刷新预览</el-button>
                    </div>
                  </div>
                </object>

                <!-- 备选方案：使用iframe（如果Object标签失败） -->
                <iframe
                  v-if="urlError && !showFallback"
                  :src="frontDomain"
                  class="iframe-box object-preview"
                  ref="fallbackIframe"
                  @load="onIframeLoad"
                  @error="onIframeError"
                  frameborder="0"
                  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
                  style="border: none"
                ></iframe>
              </div>
              <!-- 保留原始遮罩层代码（已注释） -->
              <!-- <div class="iframe-mask"></div> -->

              <!-- 新的遮罩层：用于Object标签 -->
              <div class="object-mask" v-if="showMask" @click="handleMaskClick"></div>
            </div>
          </div>
          <div style="width: 100%">
            <el-row>
              <el-col v-bind="grid">
                <div class="flex_between">
                  <el-button
                    v-hasPermi="['platform:pagediy:update', 'platform:pagediy:getdefault', 'platform:pagediy:info']"
                    type="primary"
                    @click="handlerDiyHomePage()"
                    size="small"
                    class="mb35"
                    style="font-size: 12px"
                    >首页装修</el-button
                  >
                  <el-card
                    body-style="background-color: #F9F9F9;"
                    class="mb20 Qrcode-card"
                    shadow="never"
                    :bordered="false"
                  >
                    <el-row>
                      <el-col v-bind="grid2">
                        <div class="acea-row row-between-wrapper Qrcode-box">
                          <div>
                            <div class="title mb20">微信小程序</div>
                            <div class="tips">扫描右侧二维码查看</div>
                          </div>
                        </div>
                      </el-col>
                      <el-col v-bind="grid2">
                        <div style="text-align: right">
                          <el-image :src="Qrcode" class="Qrcode_img"></el-image>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                  <el-card body-style="background-color: #F9F9F9;" class="Qrcode-card" shadow="never" :bordered="false">
                    <el-row>
                      <el-col v-bind="grid2">
                        <div class="acea-row row-between-wrapper Qrcode-box">
                          <div>
                            <div class="title mb20">微信公众号</div>
                            <div class="tips">扫描右侧二维码查看</div>
                          </div>
                        </div>
                      </el-col>
                      <el-col v-bind="grid2">
                        <div class="acea-row" style="justify-content: right">
                          <div id="diyQrcode"></div>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-else class="rightModel">
          <div slot="header" class="clearfix mb20">
            <div class="container" v-hasPermi="['platform:pagediy:list']">
              <el-form size="small" inline @submit.native.prevent>
                <el-form-item label="模板名称：">
                  <el-input
                    v-model.trim="name"
                    placeholder="请输入模板名称"
                    class="selWidth"
                    clearable
                    @keyup.enter.native="getList(1)"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-button
              type="primary"
              v-hasPermi="['platform:pagediy:save']"
              @click="handlerEditDiyPage(0, 'add')"
              size="small"
              style="font-size: 12px"
              ><i class="el-icon-plus" style="margin-right: 4px" />添加</el-button
            >
            <el-button v-hasPermi="['platform:pagediy:list']" @click="getList(1)" size="small" style="font-size: 12px"
              >刷新</el-button
            >
          </div>
          <el-table
            v-loading="listLoading"
            :data="tableData.data"
            size="small"
            class="table"
            @row-dblclick="handleName"
            highlight-current-row
            :cell-class-name="tableCellClassName"
          >
            <el-table-column prop="id" label="ID" width="50" />
            <el-table-column label="模板名称" prop="name" min-width="210" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div class="acea-row row-middle">
                  <el-tag v-show="scope.row.isDefault === 1" effect="plain" class="mr5">首页</el-tag>
                  <!--v-if去判断双击的是不是当前单元格-->
                  <el-input
                    @blur="hideInput(scope.row)"
                    size="mini"
                    maxlength="15"
                    :ref="scope.row.index + ',' + scope.column.index"
                    v-model="scope.row.name"
                    v-if="
                      scope.row.index + ',' + scope.column.index == currentCell &&
                      checkPermi(['platform:pagediy:updatename'])
                    "
                  >
                  </el-input>
                  <div v-else style="cursor: pointer" class="line1">{{ scope.row.name }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="添加时间" min-width="180" />
            <el-table-column prop="updateTime" label="更新时间" min-width="180" />
            <el-table-column label="操作" width="190" fixed="right">
              <template slot-scope="scope">
                <a
                  v-hasPermi="['platform:pagediy:update', 'platform:pagediy:info']"
                  @click="handlerEditDiyPage(scope.row.id, 'edit')"
                  >设计</a
                >
                <el-divider direction="vertical"></el-divider>
                <template v-if="scope.row.isDefault !== 1 && checkPermi(['platform:pagediy:setdefault'])">
                  <a @click="setHomepage(scope.row.id)">设为首页</a>
                  <el-divider direction="vertical"></el-divider>
                </template>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-hasPermi="['platform:pagediy:save', 'platform:pagediy:info']"
                      @click.native="handlerEditDiyPage(scope.row.id, 'copy')"
                      >复制</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-if="scope.row.isDefault !== 1 && checkPermi(['platform:pagediy:delete'])"
                      @click.native="handleDelete(scope.row.id, scope.$index)"
                      >删除</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="previewProtol(scope.row.id)">预览</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              background
              :page-sizes="[10, 20, 30]"
              :page-size="tableForm.limit"
              :current-page="tableForm.page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.total"
              @size-change="handleSizeChange"
              @current-change="pageChange"
            />
          </div>
        </div>
      </div>
    </el-card>

    <!--    列表预览弹窗-->
    <el-dialog
      :visible.sync="perViewDia.visible"
      title=""
      width="430px"
      top="7vh"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <iframe
        v-if="perViewDia.visible"
        id="ifPerviewShop"
        :src="perViewDia.perViewUrl"
        style="width: 390px; height: 800px"
        frameborder="0"
      />
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  pagediyListApi,
  pagediySetdefaultApi,
  pagediyDeleteApi,
  pagediyGetSetHome,
  wechatQrcodeApi,
  pagediyUpdatenameApi,
} from '@/api/devise';
import QRcode from 'qrcodejs2';
import { checkPermi } from '@/utils/permission';
import { handleDeleteTable } from '@/libs/public'; // 权限判断函数
import { safeNavigate } from '@/utils/open-window'; // 安全跳转函数
export default {
  name: 'index',
  data() {
    return {
      grid: {
        xl: 16,
        lg: 20,
        md: 20,
        sm: 24,
        xs: 24,
      },
      grid2: {
        xl: 12,
        lg: 12,
        md: 20,
        sm: 24,
        xs: 24,
      },
      listActive: 0,
      tabList: ['商城首页', '自定义页面'], // 暂时禁用自定义页面功能
      tableForm: {
        page: 1,
        limit: 10,
        name: '',
      },
      name: '',
      listLoading: false,
      tableData: {
        data: [],
        total: 0,
      },
      frontDomain: '',
      perViewDia: {
        // 列表二维码预览
        visible: false,
        perViewUrl: '',
      },
      Qrcode: '', //小程序二维码
      // 用一个字符串来保存当前双击的是哪一个单元格
      currentCell: null,
      // Object标签相关状态
      showMask: false, // 是否显示遮罩层
      objectLoading: true, // Object加载状态
      loadTimeout: null, // 加载超时定时器
      urlError: false, // URL错误状态
      showFallback: false, // 是否显示最终备用界面
    };
  },
  mounted() {
    // 恢复frontDomain用于Object标签预览
    this.frontDomain = `https://h5.aidea-tops.com/`;

    // 验证预览URL是否有效
    this.validatePreviewUrl();

    // 设置加载超时
    this.setLoadTimeout();

    if (checkPermi(['platform:pagediy:list'])) this.getList();
    // 恢复二维码相关功能
    this.getWechatQrcode();
    this.getQRcode();
  },

  beforeDestroy() {
    // 清理超时定时器
    if (this.loadTimeout) {
      clearTimeout(this.loadTimeout);
      this.loadTimeout = null;
    }
  },
  methods: {
    checkPermi,
    // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
    // 拼接后类似这样："1,0","1,1",
    handleName(row, column) {
      this.currentCell = row.index + ',' + column.index;
      // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
      setTimeout(() => {
        // 双击后自动获得焦点
        this.$refs[row.index + ',' + column.index].focus();
      });
    },
    // 当input失去焦点的时候，隐藏input
    hideInput(item) {
      if (!item.name) {
        return this.$message.warning('模板名称不能为空');
      } else {
        this.currentCell = null;
      }
      pagediyUpdatenameApi({
        id: item.id,
        name: item.name,
      }).then((res) => {
        this.$message.success('编辑成功');
      });
    },
    //微信二维码
    getQRcode() {
      // 恢复二维码生成功能，但使用默认域名
      document.getElementById('diyQrcode').innerHTML = '';
      const defaultDomain = process.env.VUE_APP_BASE_API || 'https://example.com';
      new QRcode('diyQrcode', { width: 120, height: 120, text: defaultDomain });
    },
    //小程序二维码
    getWechatQrcode() {
      // 恢复小程序二维码生成功能
      // env_version	默认值为："release"，要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
      wechatQrcodeApi({
        scene: 'id=0',
        path: 'pages/index/index',
        env_version: 'release',
      })
        .then((res) => {
          this.Qrcode = res.code;
        })
        .catch((error) => {
          console.error('获取小程序二维码失败:', error);
        });
    },
    //点击左侧菜单
    ProductNavTab(index) {
      this.listActive = index;
    },
    //预览
    previewProtol(id) {
      if (!id) return;
      // 使用默认域名进行预览
      const defaultDomain = process.env.VUE_APP_BASE_API || 'https://example.com';
      this.perViewDia.perViewUrl = defaultDomain + '/pages/index/index?id=' + id;
      this.perViewDia.visible = true;
    },
    // 使用模板
    setHomepage(id) {
      this.$modalSure('把该模板设为首页')
        .then(() => {
          pagediySetdefaultApi(id)
            .then((res) => {
              this.$message.success('操作成功');
              this.getList();
            })
            .catch((error) => {
              console.error('设置首页模板失败:', error);
              this.$message.error('操作失败，请重试');
            });
        })
        .catch((error) => {
          console.error('用户取消操作:', error);
        });
    },
    // DIY 编辑首页
    handlerDiyHomePage() {
      pagediyGetSetHome()
        .then((homePageId) => {
          this.handlerEditDiyPage(homePageId, 'edit');
        })
        .catch((error) => {
          console.error('获取首页ID失败:', error);
          this.$message.error('获取首页信息失败，请重试');
        });
    },
    // 添加
    handlerEditDiyPage(id, type) {
      const { href } = this.$router.resolve({
        path: `/page/design/creatDevise/${id}/${type}`,
      });
      window.open(href);
    },
    // 添加
    // handlerEditDiyPage(id, type) {
    //   // 修复NProgress进度条问题 - 在跳转前强制关闭
    //   if (window.NProgress && window.NProgress.isStarted()) {
    //     window.NProgress.done();
    //   }

    //   // 清理可能的全局遮罩层
    //   this.$nextTick(() => {
    //     const progressBars = document.querySelectorAll('#nprogress .bar, #nprogress .spinner');
    //     progressBars.forEach(bar => {
    //       if (bar.parentNode) {
    //         bar.parentNode.removeChild(bar);
    //       }
    //     });

    //     // 清理可能的全局遮罩
    //     const masks = document.querySelectorAll('.nprogress-mask, .el-loading-mask');
    //     masks.forEach(mask => {
    //       if (mask.parentNode && mask.style.display !== 'none') {
    //         mask.style.display = 'none';
    //       }
    //     });
    //   });

    //   // 修复打包后跳转失效问题
    //   const { href } = this.$router.resolve({
    //     path: `/page/design/creatDevise/${id}/${type}`,
    //   });

    //   // 使用安全的跳转函数
    //   const success = safeNavigate(href, {
    //     target: '_blank',
    //     fallbackToCurrentPage: true,
    //     showConfirm: true,
    //     confirmMessage: '浏览器阻止了弹窗，是否在当前页面打开装修页面？'
    //   });

    //   // 如果安全跳转失败，使用router.push作为最后备用方案
    //   if (!success) {
    //     this.$router.push({
    //       path: `/page/design/creatDevise/${id}/${type}`,
    //     });
    //   }
    // },
    getList(num) {
      this.listLoading = true;
      this.tableForm.page = num ? num : this.tableForm.page;
      this.tableForm.name = encodeURIComponent(this.name);
      pagediyListApi(this.tableForm)
        .then((res) => {
          this.listLoading = false;
          this.tableData.data = res.list;
          this.tableData.total = res.total;
        })
        .catch((error) => {
          this.listLoading = false;
          console.error('获取页面列表失败:', error);
          this.$message.error('获取页面列表失败，请重试');
        });
    },
    // 删除
    handleDelete(id, idx) {
      this.$modalSure('删除模板吗')
        .then(() => {
          pagediyDeleteApi({ id: id })
            .then((res) => {
              this.$message.success('删除成功');
              handleDeleteTable(this.tableData.data.length, this.tableForm);
              this.getList();
            })
            .catch((error) => {
              console.error('删除模板失败:', error);
              this.$message.error('删除失败，请重试');
            });
        })
        .catch((error) => {
          console.error('用户取消删除:', error);
        });
    },
    handleSizeChange(val) {
      this.tableForm.limit = val;
      this.getList();
    },
    pageChange(val) {
      this.tableForm.page = val;
      this.getList();
    },

    // Object标签相关方法
    onObjectLoad() {
      console.log('Object预览加载成功');
      this.clearLoadTimeout(); // 清除超时定时器
      this.objectLoading = false;
      this.showMask = false;
    },

    // 设置加载超时
    setLoadTimeout() {
      this.clearLoadTimeout(); // 先清除之前的定时器
      this.loadTimeout = setTimeout(() => {
        if (this.objectLoading) {
          console.warn('Object预览加载超时');
          this.onObjectError();
        }
      }, 10000); // 10秒超时
    },

    // 清除加载超时
    clearLoadTimeout() {
      if (this.loadTimeout) {
        clearTimeout(this.loadTimeout);
        this.loadTimeout = null;
      }
    },

    onObjectError() {
      console.error('Object预览加载失败');
      this.clearLoadTimeout(); // 清除超时定时器
      this.objectLoading = false;
      this.showMask = false; // 确保遮罩层不显示

      // 显示更友好的错误提示
      this.$message({
        type: 'warning',
        message:
          '页面预览加载失败，可能原因：\n1. 预览地址无法访问\n2. 网络连接问题\n3. 跨域限制\n\n建议：检查前端域名配置或稍后重试',
        duration: 8000,
        showClose: true,
      });
    },

    // 验证预览URL是否有效
    async validatePreviewUrl() {
      try {
        // 检查URL格式
        if (!this.frontDomain || !this.isValidUrl(this.frontDomain)) {
          console.warn('预览URL格式无效:', this.frontDomain);
          this.showUrlError('预览地址格式无效');
          return false;
        }

        // 尝试预检查URL是否可访问（可选，避免CORS问题）
        // 这里我们只做基本的URL格式验证
        console.log('预览URL验证通过:', this.frontDomain);
        return true;
      } catch (error) {
        console.error('URL验证失败:', error);
        this.showUrlError('预览地址验证失败');
        return false;
      }
    },

    // 检查URL格式是否有效
    isValidUrl(string) {
      try {
        new URL(string);
        return true;
      } catch (_) {
        return false;
      }
    },

    // 显示URL错误
    showUrlError(message) {
      this.objectLoading = false;
      this.showMask = false;
      this.urlError = true; // 设置URL错误状态
      this.$message({
        type: 'error',
        message: `预览功能异常: ${message}`,
        duration: 5000,
        showClose: true,
      });
    },

    // 重新尝试预览
    retryPreview() {
      this.urlError = false;
      this.objectLoading = true;
      this.showMask = true;
      this.setLoadTimeout();

      // 重新验证URL并尝试加载
      this.validatePreviewUrl().then((isValid) => {
        if (isValid) {
          this.$nextTick(() => {
            if (this.$refs.previewObject) {
              this.$refs.previewObject.data = this.frontDomain;
            }
          });
        } else {
          this.urlError = true;
          this.objectLoading = false;
          this.showMask = false;
          this.clearLoadTimeout();
        }
      });
    },

    // 跳过预览
    skipPreview() {
      this.urlError = true;
      this.objectLoading = false;
      this.showMask = false;
      this.clearLoadTimeout();
      this.$message.info('已跳过预览功能');
    },

    refreshPreview() {
      this.objectLoading = true;
      this.showMask = true;

      // 设置新的超时
      this.setLoadTimeout();

      // 重新验证URL
      this.validatePreviewUrl().then((isValid) => {
        if (isValid) {
          // 强制刷新Object标签
          this.$nextTick(() => {
            if (this.$refs.previewObject) {
              this.$refs.previewObject.data = this.frontDomain;
            }
          });
        } else {
          this.objectLoading = false;
          this.showMask = false;
          this.clearLoadTimeout();
        }
      });
    },

    handleMaskClick() {
      // 遮罩层点击处理
      console.log('点击了预览遮罩层');
      // 如果预览加载失败，点击遮罩层可以尝试刷新
      if (!this.objectLoading && !this.$refs.previewObject) {
        this.refreshPreview();
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* 页面装修模块专用样式 - 确保不影响其他页面 */
.pagediy-devise-container {
  /* 容器隔离 */
  isolation: isolate;
  contain: layout style paint;
}
.current_home {
  position: relative;
}

.mask {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background-color: transparent;
}

.Qrcode-box {
  width: 100%;
  height: 120px;
}

.Qrcode_img {
  width: 120px;
}

.flex_between {
  margin-left: 60px;
  width: 100%;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid #eeeeee;
  position: relative;
  padding: 20px;

  &:before {
    content: '';
    width: 0px;
    height: 0px;
    border-right: 10px solid #eeeeee;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 23px;
    left: -10px;
  }

  &:after {
    content: '';
    width: 0px;
    height: 0px;
    border-right: 9px solid #ffffff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    position: absolute;
    top: 24px;
    left: -9px;
  }
}

.title {
  font-size: 20px;
  font-weight: 800;
  color: #303133;
}

.tips {
  font-size: 14px;
  color: #909399;
}

.tab_view {
  width: 200px;
  border-right: 1px solid #eee;
  margin-right: 40px;
  display: flex;
  flex-direction: column;

  .cell_item {
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    text-align: left;
    padding-left: 30px;
    cursor: pointer;
  }
}

.tab_active {
  color: var(--prev-color-primary);
  border-right: 1px solid var(--prev-color-primary);
}

.rightModel {
  width: 100%;
  min-width: 700px;
}

.acea-row {
  flex-wrap: nowrap !important;
}

.model_header {
  width: 350px;
}

.iframe-box {
  width: 350px;
  height: 669px;
  border-radius: 10px;
  border: 1px solid #eee;
}

/* Object标签样式 - 使用更具体的作用域避免样式污染 */
.current_home .object-preview {
  /* 继承iframe的样式 */
  width: 350px;
  height: 669px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;

  /* Object标签特有样式 */
  display: block;
  overflow: hidden;

  /* 确保Object标签不会影响页面点击 */
  pointer-events: auto;
  position: relative;

  /* 防止样式污染其他页面 */
  isolation: isolate;
  contain: layout style paint;
}

/* Object标签备用内容样式 - 使用更具体的作用域 */
.current_home .preview-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10px;
  border: 1px solid #eee;

  /* 防止样式污染 */
  isolation: isolate;

  .fallback-content {
    text-align: center;
    color: #999;

    i {
      font-size: 48px;
      margin-bottom: 16px;
      display: block;
    }

    p {
      margin: 0 0 16px 0;
      font-size: 14px;
    }
  }
}

/* Object标签遮罩层样式 - 使用更具体的作用域 */
.current_home .object-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  cursor: pointer;

  /* 确保遮罩层不会阻止点击事件 */
  pointer-events: auto;

  /* 防止样式污染 */
  isolation: isolate;
}

/* 预览错误状态样式 */
.preview-error {
  width: 350px;
  height: 669px;
  border-radius: 10px;
  border: 1px solid #f56c6c;
  background: #fef0f0;
  display: flex;
  align-items: center;
  justify-content: center;

  .error-content {
    text-align: center;
    color: #f56c6c;

    i {
      font-size: 48px;
      margin-bottom: 16px;
      display: block;
    }

    h4 {
      margin: 0 0 8px 0;
      font-size: 16px;
      font-weight: bold;
    }

    p {
      margin: 0 0 20px 0;
      font-size: 14px;
      color: #909399;
    }

    .error-actions {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
  }
}

/* 修复mask样式污染问题 - 使用更具体的类名 */
.iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  pointer-events: none !important; /* 防止阻止点击事件 */
  /* 确保在打包后也能正常穿透点击事件 */
  -webkit-pointer-events: none !important;
  -moz-pointer-events: none !important;
  -ms-pointer-events: none !important;
}
</style>
